import React, { Component } from 'react';
import { List, Avatar, Space, Card, Spin } from 'antd';
import { MessageOutlined, LikeOutlined, StarOutlined, FieldTimeOutlined } from '@ant-design/icons';
import { render } from '@testing-library/react';
import { connect } from 'react-redux';
import './index.css'

// 引入自定义组件
import Popcon from './components/Popcon';

// 引入自定义操作
import { GetContentPageSaga, ChangeContentPageActivate } from '../../redux/actions/contentpage'
import { ChangePageActivate, ChangeSpinACtivate } from '../../redux/actions/public'
import { API_URL } from '../../env';

class ContentPage extends Component {

    componentDidMount() {
        this.props.GetContentPageSaga()
    }

    render() {
        const { ContentpageState, SpinState } = this.props
        const listData = ContentpageState.content_data;

        const IconText = ({ icon, text }) => (
            <Space>
                {React.createElement(icon)}
                {text}
            </Space>
        );
        return (
            <Spin spinning={ SpinState.getContent_activate } tip="请求中......">
                <List
                    bordered = {true}
                    itemLayout="vertical"
                    size="large"
                    pagination={{
                        onChange: page => {
                            // console.log(page);
                            // this.props.ChangeContentPageActivate({page: page})
                            this.props.ChangePageActivate({page: page})
                            this.props.GetContentPageSaga()
                            this.props.ChangeSpinACtivate({getContent_activate: true})
                        },
                        pageSize: 10, // 每页的条数
                        // pageSize: 4,
                        responsive: true,
                        defaultCurrent: this.props.PublicPageState,
                        total: this.props.ContentpageState.total, // 总数
                        showSizeChanger: false, 
                    }}
                    dataSource={listData}
                    footer={<div></div>}
                    renderItem={item => (
                        <List.Item
                            key={item.id}
                            actions={[
                                // <IconText icon={StarOutlined} text="收藏" key="list-vertical-star-o" />,
                                <IconText icon={FieldTimeOutlined} text={"截止："+item.enddate} key="list-vertical-power-o" />,
                                // <PoweroffOutlined />
                            ]}
                            extra={
                                <Card
                                    className='card'
                                    size="small" 
                                    title="雇主介绍"  
                                    headStyle={{backgroundColor: '#96c7f4',color: '#fff', fontWeight:'bold'}}
                                    bodyStyle={{backgroundColor: '#dbd7d7', color: '#924b4b'}}
                                    style={{ width: 400 }}
                                >
                                    <p>昵称: {item.nickname}</p>
                                    <p>背景: {item.userintro}</p>
                                </Card>
                            }
                        >
                            <List.Item.Meta
                                avatar={<Avatar src={ API_URL + "get_img/head_img/" + item.avatar} />} // 头像
                                title={<Popcon title={item.title} money={item.bounty} taskId = {item.id} />} // 任务标题
                                description={item.description} // 任务类型介绍
                            />
                            {item.content}
                    </List.Item>
                    )}
                />
            </Spin>
        )
    }
}

export default connect(
    state => ({
        ContentpageState: state.ContentpageReducer.contentpage,
        PublicPageState: state.PublicReducer.page,
        SpinState: state.PublicReducer.spinState,
    }),
    {
        GetContentPageSaga,
        ChangeContentPageActivate,
        ChangePageActivate,
        ChangeSpinACtivate, // 共用的加载状态
    }
)(ContentPage)